<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">在线/离线接入终端数</div> 
      <div class="sn-body"> 
        <div class="wrap-container"> 
          <div class="chartsdom" id="chart_accessTerminal"></div>
        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: "accessTerminal",
  data() {
    return {
      option: null,
      tableData: [],
      xAxisData: [],
      yData: [],
      sumCount: ''
    }
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getData() {
      const u = '/reception/bigScreen/queryOnlineUserCount';
      this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
      .then((res)=>{
        if(res.data.code == 200){
          this.tableData =  res.data.data.siteDetail;
          this.sumCount =  res.data.data.sumCount;
          this.getEchart();
        }else{
          this.$message.error('暂无数据');
        };
      }).catch((err)=>{
          console.log(err);
      });
    },
    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_accessTerminal'));
     
      this.option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            itemStyle: {
              borderRadius: 10,
              borderWidth: 2,
              emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
              normal:{
                color:function(params) {
                //自定义颜色
                var colorList = [          
                  'rgb(160, 167, 230)', 'rgb(237, 175, 218)',
                ];
                  return colorList[params.dataIndex]
                }
              }
            },
            data: [
              {value: 1048, name: '在线终端数'+ '--1048/个'},
              {value: 735, name: '离线终端数'+ '--735/个'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
    
  }
};
</script>

<style lang="less" scoped>
.sn-container {
  .chartsdom {
    width: 100%;
    height: 95%;
  }
}
</style>
